<template>
    <yk-space class="gather">
      <div v-for="(item,index) in gathers" :key="index" class="gather_list" :style="{background:'linear-gradient('+item.bColor+')'}">
        <!-- 上下布局，间距 -->
          <yk-space dir="vertical" size="s">
               <yk-text>{{ item.name }}</yk-text>
               <!-- 标题的字体大小  margin0-->
               <yk-title :level="2" style="margin: 0;">{{ item.total }}</yk-title>
          </yk-space>
          <yk-button v-if="index>0" size="xl" type="secondary" shape="square">
            <IconPlusOutline/>
          </yk-button>
      </div>  
    </yk-space>
 </template>
 <script lang="ts" setup>

 import { ref,onMounted } from 'vue';
 import { overLink } from '../../utils/menu';
 import { overview } from '../../mock/data';
 const gathers  =ref(overLink)
 const drawGatherData = ()=>{
    let data =  overview.data;
    gathers.value[0].total = data.file;
    gathers.value[1].total = data.article;
    gathers.value[2].total = data.gallery;
    gathers.value[3].total = data.diary;
 }
 onMounted(()=>{
  drawGatherData();
 })
 </script>
 <style lang="less" scoped>
 .gather{
      width: 100%;
  &_list{
    width: 25%;
    display: flex;
    justify-content: space-between;
    padding: @space-xl;
    border-radius: @radius-m;
    align-items: center; //上下居中
    &:first-child{
      .yk-title,.yk-text{
        color: @white;
      }
    }
  }
 }
 </style>